{include file="public/header"}
<style type="text/css">
    #sred{color:red;}
    .zhuan_li{
        border: 1px solid #04c5f0;
    }
    .zu_section1 ul  li{
        border-right: 1px solid #04c5f0;
        width: 24.7% !important;
    }
    .zu_section1 ul  li:last-child{
        border-right: none !important;
    }
</style>
<link rel="stylesheet" href="__PUBLIC__/home/js/drop/dropload.css">
<script src="__PUBLIC__/home/js/drop/dropload.min.js"></script>
<body class="she_body">
<div class="bg_fixed_v10_1"></div>
<div class="sectionY sectionY_tttt">
    <a href="{:url('User/server_center')}">
        <img src="__PUBLIC__/home/images/v10_a9.png" alt="" class="a1">
    </a>
    <p class="p1">
        <span class="ppp_title">交易订单</span>
    </p>
</div>
<div class="kong1"></div>
<div class="zu_section1 clearfix">
    <ul class="zhuan_li clearfix">
        <li {if $types ==1 } class='select' {/if} data-type="1">
        <a href="javascript:;">我的买入</a>
        </li>
        <li  {if $types ==2 } class='select' {/if} data-type="2">
        <a href="javascript:;">我的卖出</a>
        </li>
        <li  {if $types ==3 } class='select' {/if} data-type="3">
        <a href="javascript:;">正在交易</a>
        </li>
        <li  {if $types ==4 } class='select' {/if} data-type="4">
        <a href="javascript:;">历史记录</a>
        </li>
    </ul>
</div>
<style>
    .trtr{
        padding: 10px;
    }
    .trtr .k1{
        background: url("__PUBLIC__/home/images/v10_a19.png");
        background-size: 100% 100%;
        padding: 10px;
    }
</style>
<div class="zu_section2 content">
    <div class="container content1" >
<!--        <div class="trtr">-->
<!--            <div class="k1">-->
<!--                <div class="f1">-->
<!--                    <span class="s1">订单编号：-&#45;&#45;&#45;&#45;</span>-->
<!--                    <span class="s2">待转让</span>-->
<!--                </div>-->
<!--                <div class="f2">-->
<!--                    <p class="p1">-->
<!--                        <span class="s1">求购数量：</span>-->
<!--                        <span class="s2 sred">111</span>-->
<!--                    </p>-->
<!--                    <p class="p1">-->
<!--                        <span class="s1">单价：</span>-->
<!--                        <span class="s2 sred">100</span>-->
<!--                    </p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
    </div>
</div>
</body>
<script>
    $(function (){
        $(".zhuan_li li").click(function(){
            $(this).addClass("select").siblings().removeClass("select")
            params.type = $(this).data('type')
            mm.opts.loadUpFn(mm)
        })
    })

    var params = {
        page:0,
        page_size:10,
        type:{$types},
    };
    var mm;
    $(function(){
        // dropload
        mm = $('.content').dropload({
            scrollArea : window,
            domUp : {
                domClass   : 'dropload-up',
                domRefresh : '<div class="dropload-refresh" style="color: #fff">↓下拉刷新</div>',
                domUpdate  : '<div class="dropload-update" style="color: #fff">↑释放更新</div>',
                domLoad    : '<div class="dropload-load" style="color: #fff"><span class="loading"></span>加载中</div>'
            },
            domDown : {
                domClass   : 'dropload-down',
                domRefresh : '<div class="dropload-refresh" style="color: #fff">↑上拉加载更多</div>',
                domLoad    : '<div class="dropload-load" style="color: #fff"><span class="loading"></span>加载中</div>',
                domNoData  : '<div class="dropload-noData" style="color: #fff">暂无更多数据</div>'
            },
            loadUpFn : function(me){
                params.page=1;
                var _html = '';
                $.ajax({
                    url:'{:url("Rent/order")}',
                    data:params,
                    dataType:"JSON",
                    type:"GET",
                    success:function (res){
                        var data = res.result_data;
                        if(data.length>0){
                            _html = formatList(data);
                        }
                        $('.content1').html(_html);
                        // 每次数据加载完，必须重置
                        me.resetload();
                        // 重置页数，重新获取loadDownFn的数据
                        page = 1;
                        // 解锁loadDownFn里锁定的情况
                        me.unlock();
                        me.noData(false);
                    },
                    error:function (res){
                        alert(res);
                    }
                })
            },
            loadDownFn : function(me){
                params.page++;
                var _html = '';
                $.ajax({
                    url:'{:url("Rent/order")}',
                    data:params,
                    dataType:"JSON",
                    type:"GET",
                    success:function (res){
                        var data = res.result_data;
                        if(data.length>0){
                            _html = formatList(data);
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 插入数据到页面，放到最后面
                        $('.content1').append(_html);
                        // 每次数据插入，必须重置
                        me.resetload();
                    },
                    error:function (res){
                        alert(res);
                    }
                })
            },
            threshold : 50
        });
    });

    function formatList(data){
        var _html = '';
        $.each(data, function (i,v) {
            _html += '        <div class="trtr" onclick="location.href=\''+v.url+'\'">\n' +
                '            <div class="k1">\n' +
                '                <div class="f1">\n' +
                '                    <span class="s1">订单编号：'+v.create_time+'-'+v.id+'</span>\n' +
                '                    <span class="s2">'+v.status_text+'</span>\n' +
                '                </div>\n' +
                '                <div class="f2">\n' +
                '                    <p class="p1">\n' +
                '                        <span class="s1">求购数量：</span>\n' +
                '                        <span class="s2 sred">'+v.num+'</span>\n' +
                '                    </p>\n' +
                '                    <p class="p1">\n' +
                '                        <span class="s1">单价：</span>\n' +
                '                        <span class="s2 sred">'+v.price+'</span>\n' +
                '                    </p>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '        </div>';
        })
        return _html;
    }

</script>

</html>
